import { cn } from "@/common/cn";

export type AvatarShape = "circle" | "square";
export type AvatarPresence = "online" | "offline";

type AvatarProps = {
  shape?: AvatarShape | undefined;
  size?: Size | undefined;
  src?: string | undefined;
  bordered?: boolean | undefined;
  presence?: AvatarPresence | undefined;
  className?: string | undefined;
};

const AVATAR_SIZES = {
  xl: "w-14",
  lg: "w-12",
  md: "w-10",
  sm: "w-8",
  xs: "w-6",
};

const AVATAR_SQUARE_SIZES = {
  xl: "rounded-xl",
  lg: "rounded-lg",
  md: "rounded-md",
  sm: "rounded-md",
  xs: "rounded-sm",
};

const AVATAR_PRESENCE = {
  online: "avatar-online",
  offline: "avatar-offline",
};

function shapeClass(shape: AvatarShape, size: Size): string {
  switch (shape) {
    case "circle":
      return "rounded-full";
    case "square":
      return AVATAR_SQUARE_SIZES[size];
    default:
      throw new Error("Invalid shape");
  }
}

/**
 * 基本事件示例
 */
export default function Avatar({ shape, size, src, bordered, className, presence }: AvatarProps) {
  return (
    <div className={cn("avatar", presence && AVATAR_PRESENCE[presence])}>
      <div
        className={cn(
          AVATAR_SIZES[size || "md"] || AVATAR_SIZES.md,
          shapeClass(shape || "square", size || "md"),
          bordered && "ring-gray-100 ring-2 ring-offset-base-100 ring-offset-2",
          className,
        )}
      >
        <img src={src} alt="avatar" />
      </div>
    </div>
  );
}
